import React, { Component } from 'react'
import { Table, Button, Popconfirm} from 'antd'
import Addjoke from './Laugh/Addjoke.js'
import Editjoke from './Laugh/Editjoke.js'

import axios from 'axios'

export default class Laugh extends Component {
    state = {
        showAddUserDialog: false,//显示添加用户的对话框
        showEditUserDialog: false,//显示修改的对话框
        editUserRow: null,//当前编辑的用户信息
        deleteArr: [],
        userlist: [],
        columns: [{ key: 'joke_id', title: '编号', dataIndex: 'joke_id',align:'center',width:80 },
        { title: '添加时间', dataIndex: 'joke_time',align:'center',width:180},
        { title: '内容', dataIndex: 'joke_content' },
        {
            title: '编辑', dataIndex: 'del',
            render: (del, row) => {
                return (
                    <div >
                        <Button
                            onClick={() => this.setState({ showEditUserDialog: true, editUserRow: row })}
                            style={{ width: '60px' }} type="primary">编辑</Button>
                        <Popconfirm
                            onConfirm={() => { this.deleteUser(row.joke_id) }}
                            onText='确认'
                            cancelText='取消'
                            title="您确认要删除吗"
                        >
                            <Button style={{ width: '60px' }} type="danger" >删除</Button>
                        </Popconfirm>
                    </div>
                )
            }
        }]
    }


    get=()=>{
        const token = localStorage.getItem('token');
        if (token) {

            axios.get('https://wx.xxmtcds.top:2333/admin/joke', {
                headers: { 'authorization': `${token}` }
            })
                .then(res => {
                    // console.log(res.data);
                    this.setState({ userlist: res.data })
                })
                .catch(error => {
                    console.log(error);
                })
        }
    }


    componentDidMount() {
      this.get();
    }

    componentWillUnmount = () => {
        this.setState = (state,callback)=>{
          return;
        };
    }
    
    //多选删除
    deletelist = () => {
        const { deleteArr, userlist } = this.state;
        let idArr = [];
        let newlist = userlist;

        for (let i = 0; i < deleteArr.length; i++) {
            newlist = newlist.filter(item => item.joke_id !== deleteArr[i].joke_id);
        }
        for (let i = 0; i < deleteArr.length; i++) {
            idArr.push(deleteArr[i].joke_id);
        }
        console.log(idArr);


        const token = localStorage.getItem('token');
        if (token) {
            console.log(token);

            axios({
                method: 'delete',
                url: 'https://wx.xxmtcds.top:2333/admin/joke',
                data: {
                    isRows: true,
                    idArr: idArr
                },
                headers: { 'authorization': `${token}` }
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(err => console.log(err))
        }
        this.setState({ userlist: newlist });
    }

    //行删除
    deleteUser = (adminid) => {
        // console.log(adminid);

        const token = localStorage.getItem('token');
        if (token) {
            console.log(token);

            axios({
                method: 'delete',
                url: 'https://wx.xxmtcds.top:2333/admin/joke',
                data: {
                    isRows: false,
                    id: adminid
                },
                headers: { 'authorization': `${token}` }

            } )
                .then(function (response) {
                    console.log(response);
                })
                .catch(err => console.log(err))
        }

        const { userlist } = this.state;
        let templist = userlist;
        templist = templist.filter((item) => item.joke_id != adminid)
        this.setState({ userlist: templist });



    }
    hideAddUserDialog = () => {
        this.setState({ showAddUserDialog: false });
    }
    hideEditUserDialog = () => {
        this.setState({ showEditUserDialog: false });
    }
    userRowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            this.setState({ deleteArr: selectedRows });//主码
        }
    }


    edituser = (oldval, newval) => {

        let templist = this.state.userlist;
        let arr = [];
        let brr = {};
        brr.joke_id = oldval.joke_id;


        if (oldval.joke_time != newval.joke_time) {
            brr.joke_time = newval.joke_time;
        }
        if (oldval.joke_content != newval.joke_content) {
            brr.joke_url = newval.joke_url;
        }

        templist.forEach((item, index) => {
            if (item.joke_id != oldval.joke_id) {

                arr.push(item);
            } else {
                arr.push(newval);
            }
        })
        // console.log(arr);//新的数组
        // console.log(brr);//id和只改了哪一项
        const token = localStorage.getItem('token');
        if (token) {
            console.log(token);
            axios.put("https://wx.xxmtcds.top:2333/admin/joke", brr, {
                headers: { 'authorization': `${token}` }
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(err => console.log(err))
        }
        this.setState({ userlist: arr });
    }



    render() {
        return (
            <div>
                <Button onClick={() => this.setState({ showAddUserDialog: true })} type="primary">添加</Button>
                <Popconfirm
                    onConfirm={this.deletelist}
                    onText='确认'
                    cancelText='取消'
                    title="您确认要删除吗"
                >
                    <Button type="danger">删除</Button>
                </Popconfirm>
                <Table
                    bordered
                    style={{ backgroundColor: '#FEFEFE' }}
                    dataSource={this.state.userlist}
                    columns={this.state.columns}
                    rowSelection={this.userRowSelection}//多选框
                    rowKey='joke_id'//主键
                    pagination={{ pageSize: 4 }}
                ></Table>
                <Addjoke get={this.get.bind(this)} close={this.hideAddUserDialog} visible={this.state.showAddUserDialog} />
                <Editjoke edituser={this.edituser.bind(this)} data={this.state.editUserRow} close={this.hideEditUserDialog} visible={this.state.showEditUserDialog} />

            </div>
        );
    }
}

